<template>
  <view class="body">
    <img
      class="img-Bg"
      src="https://ainengli.meilianshuke.com/jkhx/common/assessment-result-bg.png"
      alt=""
    />
    <view class="result">
      <view v-for="(item, index) of contentList" :key="index" class="result-item">
        <view class="result-title">
          <text>{{ item.title }}</text>
        </view>
        <view class="result-content">
          <text>
            {{ item.content }}
          </text>
        </view>
      </view>
      <view class="title">
        <view class="line"></view>
        <text>推荐运动</text>
      </view>
      <view v-for="(item, index) of recommedList" :key="index" class="result-item">
        <view class="result-content">
          <view class="recommend-title">{{ item.title }}：</view>
          <text>
            {{ item.content }}
          </text>
        </view>
      </view>
    </view>
    <view class="fixed">
      <button @tap="begin" class="fix-btn">开始运动</button>
      <view @tap="reStart" class="restart">重新评估</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { question_score } from '../../../api/sleep'

const contentList = ref([
  {
    title: '运动频率',
    content:
      '根据问卷结果显示，您的运动频率过低，难以获得理想的运动效果，根据《ACSM运动测试与运动处方指南》推荐，建议您每周运动至少3次'
  },
  {
    title: '运动形式',
    content:
      '您的运动中缺乏有氧运动，建议您在运动中加入有氧运动，有助于提高您的心肺功能，降低心脑血管患病几率。'
  },
  {
    title: '运动时长',
    content: '您的运动时长较低，建议您增加运动时长。'
  },
  {
    title: '运动强度',
    content: '您目前的运动强度较低，建议您提高运动强度来获得更好的运动效果。'
  }
])
const userInfo = ref()
const recommedList = ref([
  {
    title: '运动频率',
    content: '每周4次'
  },
  {
    title: '有氧方案',
    content: '有氧运动推荐：户外跑/游泳\n有氧运动时长：15分钟'
  },
  {
    title: '抗阻方案',
    content:
      '抗阻运动推荐：中等强度（65% 1-RM）至较大强度（78% 1-RM）抗阻运动以增加肌肉力量\n进行8-10种不同动作练习\n每组8-10次，重复2-4组'
  }
])

onLoad((options: any) => {
  userInfo.value = JSON.parse(uni.getStorageSync('userInfo')).patientInfo

  const params = {
    id: options.id,
    empi: userInfo.value.empi
  }
  question_score(params).then((res) => {
    if (res.code == 0) {
      let jsonContent = JSON.parse(res.data.conclusion)
      contentList.value = jsonContent.assessmentResult
      recommedList.value = jsonContent.recommendedExercise
    }
  })
})

const begin = () => {
  uni.redirectTo({ url: '/module/src/pages/sports/sportsPlan/index' })
}

const reStart = () => {
  uni.redirectTo({ url: '/module/src/pages/sports/sportsQuestionnaire/feedback' })
}
</script>

<style lang="scss" scoped>
.body {
  position: relative;
  height: 100%;
  padding: 34rpx 32rpx;
  padding-bottom: calc(200rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
  overflow: auto;

  .img-Bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 328rpx;
  }
  .result {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;
    margin-top: 210rpx;
    .result-item {
      margin-bottom: 32rpx;
      &:last-child {
        margin: 0;
      }
      .result-title {
        display: inline-block;
        background: #00d1b6;
        border-radius: 24rpx 0 24rpx 0;
        padding: 8rpx 24rpx;
        font-weight: 700;
        font-size: 28rpx;
        color: #ffffff;
      }
      .result-content {
        background: rgba(0, 209, 182, 0.05);
        border-radius: 8rpx;
        padding: 32rpx 24rpx;
        text-align: justify;
        line-height: 48rpx;
        font-weight: 400;
        font-size: 30rpx;
        color: #0c3a34;
        .recommend-title {
          font-weight: 700;
          font-size: 32rpx;
          color: #0c3a34;
          margin-bottom: 16rpx;
        }
      }
    }
    .title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 24rpx;
      font-size: 36rpx;
      font-weight: 700;
      color: #222;
      margin-top: 16rpx;
      .line {
        width: 8rpx;
        height: 36rpx;
        margin-right: 16rpx;
        background: #00d1b6;
        border-radius: 0 8rpx;
      }
    }
  }
  .fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    box-sizing: border-box;
    width: 100%;
    padding: 24rpx 32rpx;
    padding-bottom: calc(24rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
    background: #fff;

    .fix-btn {
      width: 100%;
      font-size: 32rpx;
      font-weight: 700;
      color: #fff;
      background: #00d1b6;
      border-radius: 44rpx;
    }
    .restart {
      font-weight: 400;
      font-size: 30rpx;
      color: #00d1b6;
      margin-top: 16rpx;
      text-align: center;
    }
  }
}
</style>
